﻿ 
@inherits LayoutComponentBase
 
<div class="layout-container">
    <div id="particles-canvas"></div>
    
    <div class="content-wrapper">
        @Body
    </div>
</div>



<script>
    // 粒子效果初始化
    function initParticles() {
        particlesJS('particles-canvas', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: "#d2d2d7" },
                shape: {
                    type: "circle",
                    stroke: { width: 0, color: "#000000" },
                    polygon: { nb_sides: 5 }
                },
                opacity: {
                    value: 0.5,
                    random: false,
                    anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
                },
                size: {
                    value: 3,
                    random: true,
                    anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
                },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#d2d2d7",
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 6,
                    direction: "none",
                    random: false,
                    straight: false,
                    out_mode: "out",
                    bounce: false
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "repulse" },
                    onclick: { enable: true, mode: "push" },
                    resize: true
                },
                modes: {
                    repulse: { distance: 100, duration: 0.4 },
                    push: { particles_nb: 4 }
                }
            },
            retina_detect: true
        });
    }

    // 确保在页面加载完成后初始化
    window.addEventListener('load', () => {
        initParticles();
        window.addEventListener('resize', initParticles);
    });
</script>